<!DOCTYPE HTML>
<html lang="zh-CN">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="面试题目, 木心">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Global site tag (gtag.js) - Google Analytics -->


    <title>面试题目 | 木心</title>
    <link rel="icon" type="image/jpeg" href="https://cdn.jsdelivr.net/gh/lucy-zheng123/cdn@1.1/medias/avatar.jpg">

    <link rel="stylesheet" type="text/css" href="/zheng_jinhao/libs/awesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="/zheng_jinhao/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/zheng_jinhao/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/zheng_jinhao/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/zheng_jinhao/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/zheng_jinhao/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/zheng_jinhao/css/my.css">

    <script src="/zheng_jinhao/libs/jquery/jquery.min.js"></script>

<style type="text/css" lang="css">
    #loading-container{
        position: fixed;
        top: 0;
        left: 0;
        min-height: 100vh;
        width: 100vw;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #FFF;
        text-align: center;
        /* loader页面消失采用渐隐的方式*/
        -webkit-transition: opacity 1s ease;
        -moz-transition: opacity 1s ease;
        -o-transition: opacity 1s ease;
        transition: opacity 1s ease;
    }
    .loading-image{
        width: 120px;
        height: 50px;
        transform: translate(-50%);
    }
    
    .loading-image div:nth-child(2) {
        -webkit-animation: pacman-balls 1s linear 0s infinite;
        animation: pacman-balls 1s linear 0s infinite
    }

    .loading-image div:nth-child(3) {
        -webkit-animation: pacman-balls 1s linear .33s infinite;
        animation: pacman-balls 1s linear .33s infinite
    }

    .loading-image div:nth-child(4) {
        -webkit-animation: pacman-balls 1s linear .66s infinite;
        animation: pacman-balls 1s linear .66s infinite
    }

    .loading-image div:nth-child(5) {
        -webkit-animation: pacman-balls 1s linear .99s infinite;
        animation: pacman-balls 1s linear .99s infinite
    }
    
   .loading-image div:first-of-type {
        width: 0;
        height: 0;
        border: 25px solid #49b1f5;
        border-right-color: transparent;
        border-radius: 25px;
        -webkit-animation: rotate_pacman_half_up .5s 0s infinite;
        animation: rotate_pacman_half_up .5s 0s infinite;
    }
    .loading-image div:nth-child(2) {
        width: 0;
        height: 0;
        border: 25px solid #49b1f5;
        border-right-color: transparent;
        border-radius: 25px;
        -webkit-animation: rotate_pacman_half_down .5s 0s infinite;
        animation: rotate_pacman_half_down .5s 0s infinite;
        margin-top: -50px;
    }
    @-webkit-keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}

    @keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}

    @-webkit-keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}

    @keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}
    
    @-webkit-keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}

    @keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}
    
   
    .loading-image div:nth-child(3),
    .loading-image div:nth-child(4),
    .loading-image div:nth-child(5),
    .loading-image div:nth-child(6){
        background-color: #49b1f5;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        width: 10px;
        height: 10px;
        position: absolute;
        transform: translateY(-6.25px);
        top: 25px;
        left: 100px;
    }
    .loading-text{
        margin-bottom: 20vh;
        text-align: center;
        color: #2c3e50;
        font-size: 2rem;
        box-sizing: border-box;
        padding: 0 10px;
        text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    @media only screen and (max-width: 500px) {
         .loading-text{
            font-size: 1.5rem;
         }
    }
    .fadeout {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    /* logo出现动画 */
    @-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
    @keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);}}
 </style>
 <script>
(function () {
    const loaded = function(){
       setTimeout(function(){
            const loader = document.getElementById("loading-container");
            loader.className="fadeout" ;//使用渐隐的方法淡出loading page
            // document.getElementById("body-wrap").style.display="flex";
            setTimeout(function(){
                loader.style.display="none";
            },1000); 
        },1000);//强制显示loading page 1s  
    };
    loaded();
})()
 </script><meta name="generator" content="Hexo 4.2.1"><link rel="stylesheet" href="/zheng_jinhao/css/prism-shades-of-purple.css" type="text/css">
<link rel="stylesheet" href="/zheng_jinhao/css/prism-line-numbers.css" type="text/css"><style type="text/css" lang="css">
    #loading-container{
        position: fixed;
        top: 0;
        left: 0;
        min-height: 100vh;
        width: 100vw;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #FFF;
        text-align: center;
        /* loader页面消失采用渐隐的方式*/
        -webkit-transition: opacity 1s ease;
        -moz-transition: opacity 1s ease;
        -o-transition: opacity 1s ease;
        transition: opacity 1s ease;
    }
    .loading-image{
        width: 120px;
        height: 50px;
        transform: translate(-50%);
    }
    
    .loading-image div:nth-child(2) {
        -webkit-animation: pacman-balls 1s linear 0s infinite;
        animation: pacman-balls 1s linear 0s infinite
    }

    .loading-image div:nth-child(3) {
        -webkit-animation: pacman-balls 1s linear .33s infinite;
        animation: pacman-balls 1s linear .33s infinite
    }

    .loading-image div:nth-child(4) {
        -webkit-animation: pacman-balls 1s linear .66s infinite;
        animation: pacman-balls 1s linear .66s infinite
    }

    .loading-image div:nth-child(5) {
        -webkit-animation: pacman-balls 1s linear .99s infinite;
        animation: pacman-balls 1s linear .99s infinite
    }
    
   .loading-image div:first-of-type {
        width: 0;
        height: 0;
        border: 25px solid #49b1f5;
        border-right-color: transparent;
        border-radius: 25px;
        -webkit-animation: rotate_pacman_half_up .5s 0s infinite;
        animation: rotate_pacman_half_up .5s 0s infinite;
    }
    .loading-image div:nth-child(2) {
        width: 0;
        height: 0;
        border: 25px solid #49b1f5;
        border-right-color: transparent;
        border-radius: 25px;
        -webkit-animation: rotate_pacman_half_down .5s 0s infinite;
        animation: rotate_pacman_half_down .5s 0s infinite;
        margin-top: -50px;
    }
    @-webkit-keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}

    @keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}

    @-webkit-keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}

    @keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}
    
    @-webkit-keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}

    @keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}
    
   
    .loading-image div:nth-child(3),
    .loading-image div:nth-child(4),
    .loading-image div:nth-child(5),
    .loading-image div:nth-child(6){
        background-color: #49b1f5;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        width: 10px;
        height: 10px;
        position: absolute;
        transform: translateY(-6.25px);
        top: 25px;
        left: 100px;
    }
    .loading-text{
        margin-bottom: 20vh;
        text-align: center;
        color: #2c3e50;
        font-size: 2rem;
        box-sizing: border-box;
        padding: 0 10px;
        text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    @media only screen and (max-width: 500px) {
         .loading-text{
            font-size: 1.5rem;
         }
    }
    .fadeout {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    /* logo出现动画 */
    @-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
    @keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);}}
 </style>
 <script>
(function () {
    const loaded = function(){
       setTimeout(function(){
            const loader = document.getElementById("loading-container");
            loader.className="fadeout" ;//使用渐隐的方法淡出loading page
            // document.getElementById("body-wrap").style.display="flex";
            setTimeout(function(){
                loader.style.display="none";
            },1000); 
        },1000);//强制显示loading page 1s  
    };
    loaded();
})()
 </script></head>


<!-- 样式二（飘动的彩带） -->
<!-- <script src="https://g.joyinshare.com/hc/piao.js" type="text/javascript"></script> -->

 <div id="loading-container">
     <p class="loading-text">玩命加载中 . . . </p> 
     <div class="loading-image">
         <div></div>
         <div></div>
         <div></div>
         <div></div> 
         <div></div>
     </div>
 </div><body>
    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="/zheng_jinhao/" class="waves-effect waves-light">
                    <div>
                        
                        <img src="https://cdn.jsdelivr.net/gh/lucy-zheng123/cdn@1.1/images/lading.gif" data-original="https://cdn.jsdelivr.net/gh/lucy-zheng123/cdn@1.1/medias/logo1.gif" class="logo-img" alt="LOGO">
                        
                        <span class="logo-span">木心</span>
                    </div>
                </a>
            </div>
           
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/zheng_jinhao/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>首页</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/zheng_jinhao/tags" class="waves-effect waves-light">
      
      <i class="fas fa-tags" style="zoom: 0.6;"></i>
      
      <span>标签</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/zheng_jinhao/categories" class="waves-effect waves-light">
      
      <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
      
      <span>分类</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/zheng_jinhao/archives" class="waves-effect waves-light">
      
      <i class="fas fa-archive" style="zoom: 0.6;"></i>
      
      <span>归档</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/zheng_jinhao/about" class="waves-effect waves-light">
      
      <i class="fas fa-address-card" style="zoom: 0.6;"></i>
      
      <span>关于</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/zheng_jinhao/contact" class="waves-effect waves-light">
      
      <i class="fas fa-comments" style="zoom: 0.6;"></i>
      
      <span>留言板</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/zheng_jinhao/friends" class="waves-effect waves-light">
      
      <i class="fas fa-address-book" style="zoom: 0.6;"></i>
      
      <span>友情链接</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/zheng_jinhao/navigate" class="waves-effect waves-light">
      
      <i class="fas fa-location-arrow" style="zoom: 0.6;"></i>
      
      <span>快捷导航</span>
    </a>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="搜索" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>


<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <img src="https://cdn.jsdelivr.net/gh/lucy-zheng123/cdn@1.1/images/lading.gif" data-original="https://cdn.jsdelivr.net/gh/lucy-zheng123/cdn@1.1/medias/logo1.gif" class="logo-img circle responsive-img">
        
        <div class="logo-name">木心</div>
        <div class="logo-desc">
            
            Never really desperate, only the lost of the soul.
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/zheng_jinhao/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			首页
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/zheng_jinhao/tags" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-tags"></i>
			
			标签
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/zheng_jinhao/categories" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-bookmark"></i>
			
			分类
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/zheng_jinhao/archives" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-archive"></i>
			
			归档
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/zheng_jinhao/about" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-address-card"></i>
			
			关于
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/zheng_jinhao/contact" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-comments"></i>
			
			留言板
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/zheng_jinhao/friends" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-address-book"></i>
			
			友情链接
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/zheng_jinhao/navigate" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-location-arrow"></i>
			
			快捷导航
		</a>
          
        </li>
        
        
        <li><div class="divider"></div></li>
        <li>
            <a href="https://github.com/blinkfox/hexo-theme-matery" class="waves-effect waves-light" target="_blank">
                <i class="fab fa-github-square fa-fw"></i>Fork Me
            </a>
        </li>
        
    </ul>
</div>


        </div>

        
            <style>
    .nav-transparent .github-corner {
        display: none !important;
    }

    .github-corner {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        border: 0;
        transform: scale(1.1);
    }

    .github-corner svg {
        color: #0f9d58;
        fill: #fff;
        height: 64px;
        width: 64px;
    }

    .github-corner:hover .octo-arm {
        animation: a 0.56s ease-in-out;
    }

    .github-corner .octo-arm {
        animation: none;
    }

    @keyframes a {
        0%,
        to {
            transform: rotate(0);
        }
        20%,
        60% {
            transform: rotate(-25deg);
        }
        40%,
        80% {
            transform: rotate(10deg);
        }
    }
</style>

<a href="https://github.com/blinkfox/hexo-theme-matery" class="github-corner tooltipped hide-on-med-and-down" target="_blank"
   data-tooltip="Fork Me" data-position="left" data-delay="50">
    <svg viewBox="0 0 250 250" aria-hidden="true">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
              fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
              fill="currentColor" class="octo-body"></path>
    </svg>
</a>
        
    </nav>

</header>

    



<div class="bg-cover pd-header post-cover" style="background-image: url('https://cdn.jsdelivr.net/gh/lucy-zheng123/cdn//medias/featureimages/6.png')">
    <div class="container" style="right: 0px;left: 0px;">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <h1 class="description center-align post-title">面试题目</h1>
                </div>
            </div>
        </div>
    </div>
</div>




<main class="post-container content">

    
    <link rel="stylesheet" href="/zheng_jinhao/libs/tocbot/tocbot.css">
<style>
    #articleContent h1::before,
    #articleContent h2::before,
    #articleContent h3::before,
    #articleContent h4::before,
    #articleContent h5::before,
    #articleContent h6::before {
        display: block;
        content: " ";
        height: 100px;
        margin-top: -100px;
        visibility: hidden;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }
    

    .toc-widget {
        width: 345px;
        padding-left: 20px;
        background-color: rgb(255, 255, 255,0.7);
        border-radius: 10px;
        box-shadow: 0 10px 35px 2px rgba(0, 0, 0, .15), 0 5px 15px rgba(0, 0, 0, .07), 0 2px 5px -5px rgba(0, 0, 0, .1) !important;
    }

    .toc-widget .toc-title {
        margin: 35px 0 15px 0;
        padding-left: 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content {
        height: calc(100vh - 250px);
        overflow: auto;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;

        position: absolute;
        right: 23.5vw;
        display: block;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #floating-toc-btn {
        position: fixed;
        right: 15px;
        bottom: 76px;
        padding-top: 15px;
        margin-bottom: 0;
        z-index: 998;
    }

    #floating-toc-btn .btn-floating {
        width: 48px;
        height: 48px;
    }

    #floating-toc-btn .btn-floating i {
        line-height: 48px;
        font-size: 1.4rem;
    }
</style>
<div class="row">
    <div id="main-content" class="col s12 m12 l9">
        <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            <div class="row tag-cate">
                <div class="col s7">
                    
                    <div class="article-tag">
                        
                            <a href="/zheng_jinhao/tags/%E9%9D%A2%E8%AF%95/">
                                <span class="chip bg-color">面试</span>
                            </a>
                        
                    </div>
                    
                </div>
                <div class="col s5 right-align">
                    
                    <div class="post-cate">
                        <i class="fas fa-bookmark fa-fw icon-category"></i>
                        
                            <a href="/zheng_jinhao/categories/%E9%9D%A2%E8%AF%95/" class="post-category">
                                面试
                            </a>
                        
                    </div>
                    
                </div>
            </div>

            <div class="post-info">
                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-minus fa-fw"></i>发布日期:&nbsp;&nbsp;
                    2020-09-18
                </div>
                

                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-check fa-fw"></i>更新日期:&nbsp;&nbsp;
                    2020-09-22
                </div>
                

                
                <div class="info-break-policy">
                    <i class="far fa-file-word fa-fw"></i>文章字数:&nbsp;&nbsp;
                    10.4k
                </div>
                

                
                <div class="info-break-policy">
                    <i class="far fa-clock fa-fw"></i>阅读时长:&nbsp;&nbsp;
                    39 分
                </div>
                

                
                    <div id="busuanzi_container_page_pv" class="info-break-policy">
                        <i class="far fa-eye fa-fw"></i>阅读次数:&nbsp;&nbsp;
                        <span id="busuanzi_value_page_pv"></span>
                    </div>
				
            </div>
        </div>
        <hr class="clearfix">
        <div class="card-content article-card-content">
            <div id="articleContent">
                <h2 id="前端面试大全"><a href="#前端面试大全" class="headerlink" title="前端面试大全"></a>前端面试大全</h2><ol>
<li><p>http从未限制请求参数长度，只是浏览器或服务器对其限制</p>
</li>
<li><p>get类似于查找，可以使用缓存，而post一般是修改删除等数据库交互动作，不能使用缓存</p>
</li>
<li><p>vdom和dom的差别：vdom不会立即重排，他会频繁修改数据，取其中最真实的dom修改部分修改，再重排</p>
</li>
<li><p>scss和sass的区别，都是属于同一个预处理语言，只不过后缀不同，且sass属于严格缩进模式下的，而scss更像css</p>
</li>
<li><p>项目优化方法</p>
<pre><code>1.减少请求
2.按需使用不同的请求，如get
3.预加载、懒加载
4.优化dom层级、js公共代码抽离、css可用性提升、代码简写、使用高级语法
5.404处理
6.代码压缩，如gzip
7.尽量使用cdn
8.减少使用高性能消耗样式，如opcity、shadow等</code></pre></li>
<li><p>组件化/模块化。组件化指将一块页面内容包括js、css、html抽离出来整合成一个组件；模块化指将相同的js功能抽离成一个模块</p>
</li>
<li><p>cookies/sessionStorage/localStorage。cookies一般是浏览器和服务器交互产生，大小在4k以内；sessionStorage和localStorage类似，是js交互存放在浏览器中的数据，sessionStorage在浏览器关闭时消失，localStorage在清理缓存时消失，当然两者均可以手动删除，两者大小在4m以内，且两者都有api</p>
</li>
<li><p>js八种基本类型：String、Boolean、Number、Undefined、Object、Null、Symbol、BigInt</p>
</li>
<li><p>同源策略：是浏览器的一直安全措施，组织使用非同域名下的请求数据，为了保护本地数据不被js代码获取回来的数据污染</p>
</li>
<li><p>原生ajax。优点：1.速度快 2.效率高 3.便捷性；缺点：1.取决于js 2.安全问题 3.调试困难</p>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">const</span> myrequest <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">//创建ajax对象</span>
<span class="token comment" spellcheck="true">//配置ajax，第三个参数配置请求是否异步，默认false，但同步会阻断运行，所以一般设置true</span>
myrequest<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'https://api.adicw.cn/comic/getComicTopThree'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span>
myrequest<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment" spellcheck="true">//发送ajax</span>
myrequest<span class="token punctuation">.</span>onreadystatechange <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment" spellcheck="true">//监听ajax完成</span>
   <span class="token comment" spellcheck="true">//readyState状态：0.未初始化 1.服务器连接建立 2.请求已接收 3.请求处理中 4.请求完成，响应就绪</span>
   <span class="token comment" spellcheck="true">//status响应状态码</span>
   <span class="token keyword">if</span><span class="token punctuation">(</span>myrequest<span class="token punctuation">.</span>readyState<span class="token operator">==</span><span class="token number">4</span> <span class="token operator">&amp;&amp;</span> myrequest<span class="token punctuation">.</span>status<span class="token operator">==</span><span class="token number">200</span><span class="token punctuation">)</span>
   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myrequest<span class="token punctuation">.</span>response<span class="token punctuation">)</span><span class="token comment" spellcheck="true">//输出响应数据</span>
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
</li>
</ol>
<h2 id="CSS-HTML"><a href="#CSS-HTML" class="headerlink" title="CSS/HTML"></a>CSS/HTML</h2><ol>
<li><p>css hack</p>
<pre class="line-numbers language-html"><code class="language-html">1).当img标签引入的图片被包裹在标签内时，默认img标签下方有3px间隔。
处理方法：定义img标签为块级元素，如display: block
2).ie6以下中部分块级元素拥有默认高度(18px)
处理方法：font-size: 0; 或 overflow: hidden;
3).表单行高不同
处理方法：float: left;height: unset;border: 0;
4).ie中当li内a转换为块级会呈现阶梯状
解决方法：display: inline-block; 或 float: left;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
</li>
<li><p>行内元素/块级元素/空元素。行内元素指一行内的元素，如：img、a、span；块级元素指独占一行的元素，如：div、p；空元素指没有内容的元素，如：br；</p>
</li>
<li><p>rem/em/px。px为固定像素大小；em基于父级元素设置的大小；rem基础根元素设置的大小，其相对于浏览器进行缩放，默认情况1rem=16px，当我们想改变基准时，可以将body设置font-size: 62.5%等，避免挨个重新计算更改</p>
</li>
<li><p>alt/title。两者同为css属性，alt一般存在于img标签，用于图片加载失败时的提示；title存在于大部分标签，用于鼠标移入时的提示文字。在低版本ie中alt也有title的作用。</p>
</li>
<li><p>href/src。href超文本引用，如锚点和资源；src资源引用。</p>
</li>
<li><p>transform\animation。transform是已经定义好的动画库；animation是自己定义的帧动画</p>
</li>
<li><p>伪类/伪元素。伪类，一个冒号，格式dom树以外的内容(hover\active等)，不能用css选择器正常获取的(某元素下的第一个子元素等)，如伪类选择器(first-child等)；伪元素，双冒号，正常文档无法创建且获取的标签，如：after\before</p>
</li>
<li><p>h5新增内容：canvas、语义标签(header等)、表单(keygen等)、拖放(drag)、多媒体标签(audio等)、本地储存(storage)</p>
</li>
<li><p>css3新增内容：border扩展(shadow\radio\image)、background扩展(size\clip\渐变)、text扩展(shadow\wrap)、离线字体导入(@font-face)、transform动画(scale\translate)、transition过渡、animation帧动画、媒体查询、新布局flex等</p>
</li>
<li><p>禁止a标签跳转。<code>href=&quot;javascript:void(0)&quot;</code></p>
</li>
<li><p>禁止移动端长时间选中图片。<code>onselect = () =&gt; false</code></p>
</li>
<li><p>link\import。link是html标签，无兼容问题；import为css标签，无法兼容ie5以下；link会正常加载，而import则需要等待页面加载完成后，且link权重大于import</p>
</li>
<li><p>visibility\opacity\display\scale。三者都作用于隐藏显示元素；visibility/opacity/scale单纯的隐藏元素，实际内容不变；display会将元素占地清楚，导致布局改变</p>
</li>
<li><p>选择器优先级：!important&gt;行内&gt;id&gt;class\伪类\属性&gt;元素\伪元素&gt;继承&gt;通配符</p>
</li>
<li><p>BFC。块级格式化上下文，独立封闭空间。生成方法：1.父元素设置<code>overflow: hidden</code>或 <code>display: inline-xxx</code> 或 <code>position: absolute/fixed</code> 或 <code>float: left/right</code></p>
</li>
<li><p>IFC。内联格式化上下文，自身高度不受内部元素边距影响。生成方法：块级元素中只有内敛元素。</p>
</li>
<li><p>data-属性。h5中新添加的标签属性，可通过js操作</p>
</li>
<li><p>普通盒模型和怪异盒子模型</p>
</li>
<li><p>如何解决a标签被点击后hover失效？将a标签的hover定义在visited前</p>
</li>
<li><p>回流/重绘？回流指元素的高宽和实际位置发生变动，导致自身和其影响元素位置发生变化；重绘指元素的样式发生改变，但高宽位置并没有改变</p>
</li>
</ol>
<h2 id="JS"><a href="#JS" class="headerlink" title="JS"></a>JS</h2><ol>
<li><p>new 操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象</p>
</li>
<li><p>js只有两个作用域，全局和函数作用域。作用域存在变量提升，无论使用var将变量定义在同一作用域的任何位置，他始终会被放到执行最前面去定义，等运行到定义的位置时再赋值，let和const没有</p>
</li>
<li><p>数组、对象属于引用类型，当一个变量数组给其他变量赋值时，其他变量改变，变量数组也会改变，只是浅拷贝</p>
</li>
<li><p>+、-会将数据隐式转换为number，number包含一个特殊类型NaN，当对非数字强行转换时则返回这个</p>
</li>
<li><p>在js中，数据以二进制的格式储存，比如0.1+0.2应该为0.3，但其无法被二进制完整取值，则会返回非0.3(0.30000…..4)</p>
</li>
<li><p><code>apply、call、bind</code>，三个在function原型上的方法，用来改变this指向和传递参数，apply和call的区别在于call传递参数为很多个，而apply是将参数以数组的形式传递，而bind和call差不多，但bind在作用时并不会立即执行函数。在参数传递0-3个时，apply与call性能消耗差不多，而超过3个时call消耗更少</p>
</li>
<li><p>箭头函数和普通函数的区别：1）箭头函数更为简洁；2）箭头函数没有prototype，也不能使用new实例化；3）箭头函数会将、内部this指向内部外一层，且无法被改变；4）箭头函数中没有arguments</p>
</li>
<li><p>Symbol()创建出来的数据是唯一的，尽管他的值相同；对象的属性名称不能是对象，如果传入对象，则会默认将传入对象转换为字符串，为‘[object Object]’</p>
</li>
<li><p>匿名函数如果在创建时命名了，则在其本身内部能通过函数名称调用，外部不行，且内部再次给函数名称赋值并不会改变函数内容</p>
</li>
<li><p>在100万级别下forEach性能高于for，高于1000万后for性能远高于forEach</p>
</li>
<li><p>js没有真正意义上的数组，更像字符串，其索引实际上被换为字符串作为对象属性名，所以属于直系属性查找</p>
</li>
<li><p>void 0是什么？void是js中的一个函数，接受一个参数，始终返回undefined</p>
</li>
<li><p><code>promise.race</code>实现原理。利用任务轮询的机制，使用循环将所有promise挂起，最后优先跳出最新执行完成的promise</p>
</li>
<li><p>当变量以参数的方式传递进入函数时，函数内改变变量并不会导致外部改变，而对象属性则可以添加，因为其对象属性是内存地址</p>
</li>
<li><p>禁止冒泡/默认。<code>event.stopPropagation()</code> / <code>event.preventDefault()</code></p>
</li>
<li><p><code>mouseover/mouseenter</code>。mouseover当鼠标移入自身以及其子元素时触发，对应mouseout；mouseenter当鼠标移入自身时触发，不包括子元素，对应mouseleave</p>
</li>
<li><p>js中的各种位置</p>
<pre class="line-numbers language-javascript"><code class="language-javascript">clientHeight <span class="token comment" spellcheck="true">//可视区高度</span>
offsetHeight <span class="token comment" spellcheck="true">//可视区高度+border+滚动条</span>
scrollHeight <span class="token comment" spellcheck="true">///所有区域高度</span>
clientTop <span class="token comment" spellcheck="true">//边框厚度</span>
scrollTop <span class="token comment" spellcheck="true">//滚动后被隐藏的高度</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
</li>
<li><p>js拖拽。<code>mousedown/mousemove/mouseup</code>，鼠标移动时候的坐标 - 鼠标按下去时候的坐标 + 元素初始情况下的offset</p>
</li>
<li><p>常见BOM</p>
<pre class="line-numbers language-javascript"><code class="language-javascript">location<span class="token punctuation">.</span>href <span class="token comment" spellcheck="true">//当前url</span>
location<span class="token punctuation">.</span>search <span class="token comment" spellcheck="true">//当前url?后面内容</span>
location<span class="token punctuation">.</span>hash <span class="token comment" spellcheck="true">//当前url#后面内容</span>
location<span class="token punctuation">.</span>host <span class="token comment" spellcheck="true">//当前url域名</span>
location<span class="token punctuation">.</span>hostname <span class="token comment" spellcheck="true">//当前url主域名</span>
location<span class="token punctuation">.</span>pathname <span class="token comment" spellcheck="true">//当前url域名后内容，不包括#和?后</span>
location<span class="token punctuation">.</span>port <span class="token comment" spellcheck="true">//当前url端口部分</span>
location<span class="token punctuation">.</span>protocol <span class="token comment" spellcheck="true">//当前url协议</span>
location<span class="token punctuation">.</span>assign <span class="token comment" spellcheck="true">//设置当前url</span>
location<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">//设置当前文档的url并且移除当前记录</span>
location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">//页面重载</span>

history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">//前进或后退num页数</span>
history<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\history<span class="token punctuation">.</span><span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">//后退\前进一页</span>

navigator<span class="token punctuation">.</span>userAgent <span class="token comment" spellcheck="true">//返回浏览器信息</span>
navigator<span class="token punctuation">.</span>cookieEnabled <span class="token comment" spellcheck="true">//返回浏览器是否支持cookie</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
</li>
<li><p><code>for in/of</code>。in来自es5，用于循环数组或者对象，结果为下标或者属性名称；of来自es6，用于循环数组，结果为值</p>
</li>
<li><p>js原型链的最顶层为<code>Object.prototype</code></p>
</li>
<li><p><code>undefined/not define/null/&#39;&#39;</code>。<code>undefined</code>指未定义内容，类型为<code>undefined</code>；<code>not define</code>指未定义变量，类型为报错；null指空值，类型为<code>Object</code>；<code>&#39;&#39;</code>为空字符串，类型为<code>String</code></p>
</li>
<li><p>事件绑定/普通事件。事件绑定支持一个元素绑定多个相同事件；普通事件会被后来者覆盖</p>
</li>
<li><p>基本类型/引用类型。基本类型无法被自带方法改变原本内容，比较时是比值；引用类型的值会被自带方法改变，比如数组和对象，比较时是比内存地址</p>
</li>
<li><p><code>new</code>和<code>Object.create</code>。<code>Object.create()</code>方法创建一个空对象，这个对象的原型执行传递进入的原型链</p>
</li>
<li><p><code>++i/i++</code>。前者先加后赋值；后者先赋值后加</p>
</li>
<li><p><code>require/import</code>。require属于<code>commonjs</code>，在导出时是值拷贝，在编译时输出接口；import属于es6，在导出时是值引用，在运行时加载</p>
</li>
<li><p>对于Bool类型来说，除了<code>0/NaN/null/undefined/&#39;&#39;</code>是false，其他都是true</p>
</li>
<li><p>数据不存在的返回值</p>
<pre class="line-numbers language-javascript"><code class="language-javascript">不存在的对象、数组属性：obj<span class="token punctuation">.</span>a、arr<span class="token punctuation">[</span>x<span class="token punctuation">]</span>，返回 undefined
定义未赋值，返回 undefined
未定义，报错 not define<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
</li>
<li><p>stack栈内存/heap堆内存。前者类似于内存条，存放值类型；后者类似于硬盘，存放引用类型</p>
</li>
<li><p><code>break/continue</code>。两者作用于循环体内，前者跳出整个循环，后者跳出当前循环继续下一次循环</p>
</li>
<li><p>变量提升优先级：函数声明 &gt; arguments &gt; 变量声明</p>
</li>
<li><p><code>typeof</code> 未定义的变量会返回<code>undifined</code></p>
</li>
<li><p>函数内访问变量时,查找变量是从函数声明的位置向外层作用域中查找</p>
</li>
<li><p>对象中<code>obj.hasOwnProperty(&#39;xx&#39;)</code>和<code>&#39;xx&#39; in obj</code>的区别。前者是单纯在检查对象中是否存在指定属性，而后者是检查原型链是否存在指定属性</p>
</li>
<li><p><code>a.b.c.d</code> 和 <code>a[&#39;b&#39;][&#39;c&#39;][&#39;d&#39;]</code>，两者性能相差不多，前者略高于后者，因为后者可能是变量</p>
</li>
<li><p>判断两个数组相等用===还是==。这其实是个误区，由于数组存的地址，所以原本情况下无法判断，需要做排序、转换为字符串后使用===判断</p>
</li>
<li><p>作用域。es5前只有全局作用域和函数作用域，es6增加了块级作用域let和const</p>
</li>
<li></li>
</ol>
<hr>
<h2 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h2><h4 id="1）比较"><a href="#1）比较" class="headerlink" title="1）比较 =="></a>1）比较 ==</h4><blockquote>
<p>==在比较不同的数据类型时，会将两者转换为相同的数据类型再 比较</p>
</blockquote>
<ol>
<li>两个看着值相同的对象、数组，实际上并不相等，因为其相等判断是内存地址；</li>
<li>NaN和谁都不相等，包括他自己；</li>
<li>null和undifine值相等，但是数据类型不同，null为Object，undifine为undifine；</li>
<li>对象和字符串比较，把对象转换为字符串再比较</li>
<li>除了1-4的情况，其它比较都转换为数字比较。对象转数字：先转换为字符串，在转换为数字；字符串转数字：只要内容存在非数字，则为NaN；布尔转数字：true 1、false 0；null转数字0；undifine转数字NaN；</li>
</ol>
<h4 id="2）var、let、const"><a href="#2）var、let、const" class="headerlink" title="2）var、let、const"></a>2）var、let、const</h4><h5 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h5><ol>
<li>const在定义后不能更改，但可以更改拥有属性的属性</li>
<li>const、let不能重复定义、不存在变量提升，具有块级作用域，其存在暂时性锁区，如果块中有使用其赋值，而外部有同名函数，则会报错</li>
<li>var存在变量提升，可先使用后定义，可重复定义，其会挂载在window上</li>
</ol>
<h5 id="实现原理"><a href="#实现原理" class="headerlink" title="实现原理"></a>实现原理</h5><blockquote>
<p>const&gt;let&gt;var优先被js解析，因为const不能被修改栈内存在的值和地址，最后验证var</p>
</blockquote>
<h4 id="3）类型检测"><a href="#3）类型检测" class="headerlink" title="3）类型检测"></a>3）类型检测</h4><ol>
<li><code>typeof aa</code>：返回对应的类型字符串</li>
<li><code>aa instanceof Xxx</code>：aa是否属于Xxx的原型，返回bool</li>
<li><code>aa.constructor</code>：返回aa的constructor属性值</li>
<li><code>toString.call(aa)</code>：返回aa的详细数据类型，最精确，配合<code>Xxx.prototype.toString</code>判断是否相同</li>
</ol>
<hr>
<h2 id=""><a href="#" class="headerlink" title=""></a></h2><h2 id="VUE"><a href="#VUE" class="headerlink" title="VUE"></a>VUE</h2><h4 id="一-单页面spa的优缺点"><a href="#一-单页面spa的优缺点" class="headerlink" title="一.单页面spa的优缺点"></a>一.单页面spa的优缺点</h4><p>优点：</p>
<ul>
<li>响应速度快，切换页面不需要刷新浏览器，用户体验好，避免重复渲染</li>
<li>对服务器压力较小</li>
<li>前后端分离，架构清晰</li>
</ul>
<p>缺点：</p>
<ul>
<li>第一次加载内容较多，需要特殊处理如按需加载</li>
<li>浏览器前进回退由路由管理，需要自己建立堆栈管理</li>
<li>由于单页面的原因，seo难度较大</li>
</ul>
<h4 id="二-v-if-与-v-show"><a href="#二-v-if-与-v-show" class="headerlink" title="二.v-if 与 v-show"></a>二.v-if 与 v-show</h4><ul>
<li>v-if 为真正意义上的条件渲染，因为其在切换中会摧毁对应的组件，且如果初始化渲染时条件为假，则不作任何操作，直到条件变动</li>
<li>v-show实际上只是在切换display的属性，只是用户看不见，实际为渲染后的界面</li>
<li>v-if适合很少改变条件，切换时消耗资源多；而v-show用于频繁切换的地方，切换时消耗资源少</li>
</ul>
<h4 id="三-理解vue单向数据流"><a href="#三-理解vue单向数据流" class="headerlink" title="三.理解vue单向数据流"></a>三.理解vue单向数据流</h4><blockquote>
<p>官方的话来说：这样是为了防止子组件意外改变父组件状态，形成难以理解的数据流</p>
</blockquote>
<p>因为父组件的值在改变时，会刷新对应的父组件传入的子组件值，如果想在子组件更改父组件的值，则需要$emit派发一个事件，将事件使用v-on绑定到子组件使用时的标签内，再在父组件创建对应方法更改值</p>
<h4 id="四-computed-与-watch"><a href="#四-computed-与-watch" class="headerlink" title="四.computed 与 watch"></a>四.computed 与 watch</h4><ul>
<li>computed 为计算属性，且有缓存机制，对应的值改变时也会重新计算</li>
<li>watch 为监听属性，没有缓存，监听到被监听者变换则执行</li>
<li>computed 更适合于数据计算，因为其有缓存，可以避免不必要的重复计算；watch 更适合处理比较复杂的业务比如异步或大开销操作，可以限制执行频率，设置中间状态</li>
</ul>
<h3 id="五-数组改变，vue监测"><a href="#五-数组改变，vue监测" class="headerlink" title="五.数组改变，vue监测"></a>五.数组改变，vue监测</h3><p>当直接使用 this.arr.length 或者 this.arr[index] 改变data中的数据时，data会发生改变，但视图层并不会监听到改变，也就不会改变页面渲染内容，对应的解决方法</p>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// Vue.set</span>
Vue<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>vm<span class="token punctuation">.</span>items<span class="token punctuation">,</span> indexOfItem<span class="token punctuation">,</span> newValue<span class="token punctuation">)</span>
<span class="token comment" spellcheck="true">// vm.$set，Vue.set的一个别名</span>
vm<span class="token punctuation">.</span>$<span class="token keyword">set</span><span class="token punctuation">(</span>vm<span class="token punctuation">.</span>items<span class="token punctuation">,</span> indexOfItem<span class="token punctuation">,</span> newValue<span class="token punctuation">)</span>
<span class="token comment" spellcheck="true">//---上面适用于单vue 下面适用于vue-cli ---</span>
<span class="token comment" spellcheck="true">// Array.prototype.splice</span>
vm<span class="token punctuation">.</span>items<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>indexOfItem<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> newValue<span class="token punctuation">)</span>
<span class="token comment" spellcheck="true">// Array.prototype.splice</span>
vm<span class="token punctuation">.</span>items<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>newLength<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h4 id="六-vue生命周期钩子理解"><a href="#六-vue生命周期钩子理解" class="headerlink" title="六.vue生命周期钩子理解"></a>六.vue生命周期钩子理解</h4><p>首先，生命周期也就是vue实例的一个执行过程，从开始创建到结束销毁</p>
<ul>
<li>beforeCreate： 创建刚开始，组件的属性生效前</li>
<li>created：组件创建完成，属性完成绑定，但页面dom还未开始渲染，常用于发送简单单一的请求</li>
<li>beforeMount：相关的render函数被调用，开始渲染页面</li>
<li>mounted：页面渲染完成，dom挂载完毕，常用于发送请求、操作dom</li>
<li>beforeUpdate：数据更新前一步，在虚拟dom打补丁之前</li>
<li>update：数据完成更新后</li>
<li>activated： router中的keep-alive专有，组件被激活时调用</li>
<li>deactivated： router中的keep-alive专有，组件被摧毁时调用</li>
<li>beforeDestory： 组件销毁前调用，常用于手动摧毁之前的事件监听</li>
<li>destoryed：组件摧毁后调用</li>
</ul>
<h4 id="七-父子组件钩子执行"><a href="#七-父子组件钩子执行" class="headerlink" title="七.父子组件钩子执行"></a>七.父子组件钩子执行</h4><blockquote>
<p>初始化渲染</p>
<p>父 beforeCreate -&gt; 父 created -&gt; 父 beforeMount -&gt; 子 beforeCreate -&gt; 子 created -&gt; 子 beforeMount -&gt; 子 mounted -&gt; 父 mounted</p>
</blockquote>
<blockquote>
<p>子组件更新过程</p>
<p>父 beforeUpdate -&gt; 子 beforeUpdate -&gt; 子 updated -&gt; 父 updated</p>
</blockquote>
<blockquote>
<p>父组件更新过程</p>
<p>父 beforeUpdate -&gt; 父 updated</p>
</blockquote>
<blockquote>
<p>销毁过程</p>
<p>父 beforeDestroy -&gt; 子 beforeDestroy -&gt; 子 destroyed -&gt; 父 destroyed</p>
</blockquote>
<h4 id="八-父监听子的生命周期"><a href="#八-父监听子的生命周期" class="headerlink" title="八.父监听子的生命周期"></a>八.父监听子的生命周期</h4><p>对应的子组件使用标签内 @hook:生命周期名称=”触发时执行的方法”</p>
<h4 id="九-keep-alive的了解"><a href="#九-keep-alive的了解" class="headerlink" title="九.keep-alive的了解"></a>九.keep-alive的了解</h4><p>他是一个组件，可以使包含的组件处于保留状态，避免重复渲染，一般结合路由与动态组件使用，</p>
<p>提供include（名字匹配的缓存）和exclude（名字匹配的不缓存）两个属性，exclude优先级高些，都支持正则，有两个对应的钩子activated 和 deactivated</p>
<h4 id="十-为什么组件中的data是函数返回一个对象"><a href="#十-为什么组件中的data是函数返回一个对象" class="headerlink" title="十.为什么组件中的data是函数返回一个对象"></a>十.为什么组件中的data是函数返回一个对象</h4><p>因为组件是复用的，且js对象是引用关系，返回一个对象是为了隔离作用域，避免两个组件data相互影响</p>
<h4 id="十一-组件通信"><a href="#十一-组件通信" class="headerlink" title="十一.组件通信"></a>十一.组件通信</h4><ol>
<li><p>props/$emit</p>
</li>
<li><p>ref/$children/$parent：当ref在普通标签内时为dom，在组件内时为组件实例；访问修改子组件值；访问修改父组件值</p>
</li>
<li><p>$attrs/$listeners：</p>
<p>$attrs在子组件中接收父组件其被传递且未在子组件中使用props接收的绑定值，除开class与style，可继续将接收的数据v-bind:=”$attrs”绑定传递到子组件中的子组件内，使用$attrs获取值</p>
<p>$listeners在子组件中接收在父组件其被调用使用v-on绑定在上面的非native事件，可继续将接收的事件v-on:=”$listeners”绑定传递到子组件中的子组件内，使用$emit(‘事件名称’)调用事件</p>
</li>
<li><p>provide/inject：两者配合使用，在父组件中使用provide定义传入值，在子组件中使用inject获取值，可往下一直获取，另外，两者数据并非可响应的，但如果传入一个可监听对象，则可响应</p>
</li>
</ol>
<pre><code>provide(){
    return{
        app: this
    }
},</code></pre><p>5.vuex全局状态管理</p>
<h4 id="十二-vuex"><a href="#十二-vuex" class="headerlink" title="十二.vuex"></a>十二.vuex</h4><p>vuex是基于vue开发的一个状态管理模式，其内容为响应式的，每个vuex对应一个store仓库，包括以下五个模块：</p>
<ul>
<li>state：数据</li>
<li>getter：计算属性</li>
<li>mutation：定义同步函数</li>
<li>action：定义异步方法</li>
<li>module：分离出来的子vuex</li>
</ul>
<h4 id="十三-vue-router"><a href="#十三-vue-router" class="headerlink" title="十三.vue-router"></a>十三.vue-router</h4><p><strong>模式：hash、history、abstract</strong></p>
<ul>
<li>hash：使用url hash值作为路由，支持所有浏览器</li>
<li>history： 依赖 HTML5 History API 和服务器配置</li>
<li>abstract ：支持所有js运行环境，包括node，如果没找到api则自动进入此模式</li>
</ul>
<p><strong>守卫</strong></p>
<ul>
<li>全局beforeEach</li>
<li>后置afterEach</li>
<li>全局解析beforeResolve</li>
<li>路由独享beforeEnter</li>
</ul>
<p><strong>$router/$route</strong></p>
<ul>
<li>$router是vue-router的实例化对象，包含路由跳转、生命周期函数等</li>
<li>$route是路由信息对象，每个路由都有一个路由对象，是局部的，包含query、parh、hash等参数</li>
</ul>
<p><strong>路由传参</strong></p>
<ol>
<li>Params：this.$router.push({ name: xxx, params: { xx: ‘xxxx’ } })，参数不会显示于url，刷新页面消失</li>
<li>Params：this.$router.push({ path: xxx, query: { xx: ‘xxxx’ } })，参数显示于url，刷新页面不消失</li>
</ol>
<h4 id="十四-mvvm"><a href="#十四-mvvm" class="headerlink" title="十四.mvvm"></a>十四.mvvm</h4><p>mvvm全称 model-view-viewmodel，由mvc（model-view-controller）演变而来，mvvm实现了双向绑定，也就降低了对dom操作导致的资源消耗，提升开发效率</p>
<ul>
<li>model：数据模型，指后端交互逻辑处理，也就是后端api</li>
<li>view：视图，主要由html、css构成的页面</li>
<li>viewmodel：视图数据层，作为view和model层的中间站，负责数据处理</li>
</ul>
<h4 id="十五-vue双向绑定原理"><a href="#十五-vue双向绑定原理" class="headerlink" title="十五.vue双向绑定原理"></a>十五.vue双向绑定原理</h4><p>双向绑定指视图变化更新数据，数据变化更新视图</p>
<ol>
<li>使用Object.defineProperty()将对象内设置setter和getter，这样促使给数据赋值时会触发setter</li>
<li>使用解析器解析vue指令，将绑定的内容添加到订阅区，内容变化则执行</li>
<li>实现订阅者，监听对象变化时执行对应的指令</li>
<li>实现订阅器，采用 发布-订阅 设计模式，收集订阅者，管理监听器和订阅者</li>
</ol>
<h4 id="十六-v-model扩展"><a href="#十六-v-model扩展" class="headerlink" title="十六.v-model扩展"></a>十六.v-model扩展</h4><p><strong>修饰符</strong></p>
<ol>
<li>.lazy：将监听事件切换为change</li>
<li>.number：将输入内容转换为number</li>
<li>.trim：过滤首位字符串</li>
</ol>
<h4 id="十七-使用风格"><a href="#十七-使用风格" class="headerlink" title="十七.使用风格"></a>十七.使用风格</h4><ol>
<li>禁止v-for和v-if同时存在于同一标签，因为v-for优先级高于v-if，导致每次遍历后就会执行v-if</li>
<li>watch和computed分场合使用</li>
<li>耦合性较高的抽离为vuex</li>
<li>v-if和v-show分场合使用</li>
</ol>
<h4 id="十八-事件修饰符"><a href="#十八-事件修饰符" class="headerlink" title="十八.事件修饰符"></a>十八.事件修饰符</h4><ul>
<li>.stop：阻止冒泡</li>
<li>.caption：事件捕获</li>
<li>.native：绑定原生事件</li>
<li>.once：只执行一次</li>
<li>.self：仅自身执行</li>
<li>.prevent：阻止默认事件</li>
<li>.sync：用于组件传值时更新，配合$emit(‘update:xxx’,xxx)使用</li>
<li>.passive：提升滚动流畅度</li>
</ul>
<h4 id="十九-权限控制"><a href="#十九-权限控制" class="headerlink" title="十九.权限控制"></a>十九.权限控制</h4><ol>
<li>动态路由，使用router中的addRoute方法根据情况动态添加路由</li>
<li>路由全局守卫，根据过滤判断</li>
<li>v-else-if，组件内判断</li>
<li>使用vue指令定义全局指令在组件内判断</li>
<li>组件内单独判断</li>
</ol>
<h2 id="HTTP"><a href="#HTTP" class="headerlink" title="HTTP"></a>HTTP</h2><h4 id="一-请求方法、用途"><a href="#一-请求方法、用途" class="headerlink" title="一.请求方法、用途"></a>一.请求方法、用途</h4><ul>
<li>get：获取数据</li>
<li>post：上传数据</li>
<li>put：修改数据</li>
<li>delete：删除数据</li>
<li>head：获取数据元信息</li>
<li>connect：建立连接通道，用于代理服务器</li>
<li>options：列出可对资源实行的请求方法，用来跨域请求</li>
<li>trace：追踪请求-响应的传输路径</li>
</ul>
<p><strong>常见问题：get和post的区别</strong></p>
<ol>
<li>get会被浏览器自动缓存下来，post不会</li>
<li>get只能进行url编码，只能接收ASCII 字符，post无限制</li>
<li>get携带参数一般处于url中，而post处于请求体中，post较为安全</li>
<li>get具有幂等性，而post没有</li>
<li>get会在请求时将请求报文一次性发送，而post会先发送header、再发送body</li>
</ol>
<h4 id="二-返回状态码"><a href="#二-返回状态码" class="headerlink" title="二.返回状态码"></a>二.返回状态码</h4><ul>
<li><strong>1xx</strong>：目前是协议处理的中间状态，还需要后续操作。</li>
<li><strong>2xx</strong>：成功状态</li>
<li><strong>3xx</strong>：重定向状态，资源位置发生变动，需要重新请求</li>
<li><strong>4xx</strong>：请求报文有误</li>
<li><strong>5xx</strong>：服务器端发生错误</li>
</ul>
<h4 id="三-一个-tcp-连接能发几个-http-请求"><a href="#三-一个-tcp-连接能发几个-http-请求" class="headerlink" title="三.一个 tcp 连接能发几个 http 请求"></a>三.一个 tcp 连接能发几个 http 请求</h4><ul>
<li>在http1.0协议时，默认情况一个tcp只支持一个http请求，且不支持长链接，在请求发送完成后就会立即断开；如果需要多条保持活跃，则需要在请求头中传入Connection: Keep-Alive，但其依然有部分限制</li>
<li>在http1.1协议后，默认支持长链接，只要tcp不断开则可以一直发送http请求，没有上限</li>
</ul>
<h4 id="四-cookie与session"><a href="#四-cookie与session" class="headerlink" title="四.cookie与session"></a>四.cookie与session</h4><blockquote>
<p>cookie指服务器向浏览器发送的一小块数据，他在浏览器下次请求时会携带传向服务器；session指服务器和浏览器的一次会话过程</p>
</blockquote>
<p><strong>差别</strong></p>
<ul>
<li>cookie存在浏览器，而session存在服务器</li>
<li>cookie 只能保存 ASCII，而session可以保存任何数据</li>
<li>cookie能长时间保存，而session一般失效较快，关闭浏览器和服务器都会失效</li>
<li>cookie没有session安全，因为存储地方</li>
<li>cookie的大小一般只能在4k，而session远大于此</li>
</ul>
<p><strong>关联</strong></p>
<p>两者可以单独使用，也可以配合使用，配合情况较多。如：浏览器第一次发送请求时，服务器接收并使用session返回用户id，浏览器将id存入cookie，然后第二请求时根据cookie内容请求对应数据</p>
<p><strong>禁用cookie后的登录判断方法</strong></p>
<ol>
<li>每个请求都携带一个关键参数</li>
<li>Token。在服务器中输出一串字符串，在请求时携带此字符串</li>
</ol>
<h4 id="五-网站从输入url到跳转发生了什么"><a href="#五-网站从输入url到跳转发生了什么" class="headerlink" title="五.网站从输入url到跳转发生了什么"></a>五.网站从输入url到跳转发生了什么</h4><p>1).网络</p>
<ol>
<li>构建请求</li>
<li>查找强缓存，如果命中，直接走缓存</li>
<li>解析<code>DNS(域名系统)</code>。由于一般使用的域名，所以需要解析出具体的ip。默认端口80</li>
<li>构建<code>TCP(传输控制协议)</code>连接。这个阶段首先经历三次握手，来确定建立连接；接着进行数据传输，这里接收方接收到数据后会向发送方发送一条<code>确认接收</code>的消息，如果没接收到则判定丢失，并重新发送<code>(*发送时会将较大的数据包拆分，依次发送后由接收方组装)</code>；最后通过四次挥手断开</li>
<li>发送请求。在tcp确定链接后，浏览器则可以和服务器通信</li>
</ol>
<p>2).解析</p>
<ol>
<li>构建dom树。这个阶段将html字符串解析为dom对象，最终将dom对象压入dom树结构中</li>
<li>样式计算。首先格式化样式表，渲染引擎将css样式表解析为一个结构化对象<code>styleSheets</code>；接着将样式代名词转换为标准样式<code>(em-&gt;px,blod-&gt;700，white-&gt;#fff等)</code>；最终将具体样式绑定到节点，则中间主要为继承和层叠</li>
<li>生成布局树。遍历生成的dom树，将其添加到布局树<code>(只会处理可见元素，如head中和display:none的内容不会处理)</code></li>
</ol>
<p>3).渲染</p>
<ol>
<li>建立图层树。对特定的节点进行分层，分为显式合成和隐式合成。前者分为层叠上下文<code>(html根元素、position不为static且应用z-index、opcity不为1等)</code>和需要裁减的元素<code>(文本超出容器宽度，文本需要换行)</code>；后者在于当层级低的节点提升为单独图层后，原本比起高的节点都会成为单独图层</li>
<li>生成绘制列表。这一步渲染引擎将图层的绘制拆分为一个个绘制指令，然后按顺序合成一个绘制列表</li>
<li>生成图块、位图。将绘制列表交给合成线程，合成线程将图层分块<code>(一般为256\*256、512\*512)</code></li>
<li>显示器显示。在上面的操作完成后，浏览器进程中的viz组件接受到命令，将页面内容绘制到内存，然后内存交给显卡</li>
</ol>
<h4 id="六-其他"><a href="#六-其他" class="headerlink" title="六.其他"></a>六.其他</h4><ol>
<li>cros预请求。需预检的请求，首先使用options发去预检到服务器，通过后才可发送实际请求，可以用处理跨域。只允许get、post、head</li>
<li>tcp三次握手。1.客户端发送请求链接，服务器接收报文段；2.服务器确定报文，返回客户端报文；3.客户端确定报文，向服务器返回最后一段报文</li>
<li>如何把项目中的http更换为https？在项目搭建时最请求就进行封装，独立basePath，更换时直接更改basePath；可使用<code>&lt;meta http-equiv =&quot;Content-Security-Policy&quot; content=&quot;upgrade-insecure-requests&quot;&gt;</code>替换</li>
</ol>
<h2 id="localstoreage-sessionstroage-cookie的区别"><a href="#localstoreage-sessionstroage-cookie的区别" class="headerlink" title="localstoreage sessionstroage cookie的区别"></a>localstoreage sessionstroage cookie的区别</h2><p>共同点：都是保存在浏览器端，且同源的。<br> 区别：cookie数据始终在同源的<a href="https://link.jianshu.com?t=https://www.baidu.com/s?wd=http请求&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYPWTdmvN-nWfLmHF9n1fk0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3Erj04PjRvnWndPHm1PWTkrHTz" target="_blank" rel="noopener">http请求</a>中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过<a href="https://link.jianshu.com?t=https://www.baidu.com/s?wd=4k&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYPWTdmvN-nWfLmHF9n1fk0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3Erj04PjRvnWndPHm1PWTkrHTz" target="_blank" rel="noopener">4k</a>，同时因为每次<a href="https://link.jianshu.com?t=https://www.baidu.com/s?wd=http请求&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYPWTdmvN-nWfLmHF9n1fk0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3Erj04PjRvnWndPHm1PWTkrHTz" target="_blank" rel="noopener">http请求</a>都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。</p>
<h2 id="个人总结"><a href="#个人总结" class="headerlink" title="个人总结"></a>个人总结</h2><h3 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h3><ol>
<li><p>HTML5中的新标签，举例一下</p>
<p>canvas绘画，本地离线存储localStorage，sessionStorage，video和audio元素，语义化元素，表单类型（date，time，email等），地理定位等</p>
</li>
</ol>
<h3 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h3><ol>
<li><p>CSS3新的标签</p>
<p>边框：圆角border-radius，阴影box-shadow，边框图片border-image<br>背景：背景定位区域background-origin，背景大小支持百分比background-size<br>文字效果：文字阴影text-shadow，长单词拆分word-wrap<br>2D转换：transform:对元素进行移动translate()，缩放scale()，转动rotate()，拉伸skew()<br>3D转换：transform:对元素进行x轴旋转rotateX()，y轴旋转rotateY()<br>过渡，动画， 多列等等</p>
</li>
</ol>
<p>面试可能会考察到的点：</p>
<p>什么是HTML语义化？</p>
<blockquote>
<p>答：可以先回答一些常见的标签 header main footer section等等。可以根据内容的机构选择合适的标签，便于开发者阅读以及调试</p>
</blockquote>
<p>为什么要语义化？</p>
<blockquote>
<p>1.在没有css样式的情况下。页面也能展示良好的内容结构。代码结构。</p>
<p>2.用户体验：例如title ，alt用于解释名词或者解释图片信息还有label标签的活用等等;</p>
<p>3.便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化</p>
</blockquote>
<p>BFC,IFC, GFC ,FFC</p>
<p>BFC 块级格式化上下文。类似于结界，怎么产生BFC呢？</p>
<p>float的值不为none overflow的值不为 visible positon 的值不为relative和static</p>
<p>作用： 常见的多栏布局，结合块级元素浮动，</p>
<p>特性：</p>
<p>1.同一个BFC下外边距会发生折叠</p>
<p> 两个BFC放在一起设置边距默认会重叠放在不同的BFC块里面就不会</p>
<p>2.BFC可以包含浮动的元素（清除浮动）</p>
<p>3.BFC可以阻止元素被浮动覆盖</p>
<p>IFC 内联格式化上下文</p>
<p>作用：水平居中 块级居中时设置inline-bllock外层产生IFC 通过text-align可以设置居中</p>
<p>垂直居中 创建一个IFC，用其中一个元素撑开父元素的高度，然后设置vertical-align:middle</p>
<p>其他行元素可以再此父元素下垂直居中</p>
<p>GFC 网格格式化上下文</p>
<p>DIV水平垂直居中方式（6种）</p>
<p>元素的显示和隐藏</p>
<h3 id="1）Display设置元素的显示与隐藏"><a href="#1）Display设置元素的显示与隐藏" class="headerlink" title="1）Display设置元素的显示与隐藏"></a>1）Display设置元素的显示与隐藏</h3><p>1）display：none; 可以隐藏对象</p>
<p>2）display：block; 除了将元素转换为块元素之外，还有一个意思是将隐藏元素显示出来。</p>
<p>用display属性将元素隐藏起来的特点是，元素隐藏之后就不再占用位置。</p>
<p>3）事件监听： 无法进行DOM事件监听；性能较差</p>
<p>4）继承，不会被子元素继承，毕竟子类也不会被渲染；</p>
<p>5）transition: transition不支持display</p>
<h3 id="1）Visibility可见性"><a href="#1）Visibility可见性" class="headerlink" title="1）Visibility可见性"></a>1）Visibility可见性</h3><p><a href="http://www.xyjweb.com/tag/visibility属性" target="_blank" rel="noopener">visibility属性</a>可以设置或检索是否现实对象。</p>
<p>1）visibility：visible;表示对象可见</p>
<p>2）visibility：hidden;表示对象隐藏</p>
<p>该属性和display属性的区别是，对象隐藏之后，继续保留原来的位置。</p>
<p>3）事件监听： 无法进行DOM事件监听； 引起重绘性能较高</p>
<p>4）会被子元素继承</p>
<h3 id="opacity-属性"><a href="#opacity-属性" class="headerlink" title="opacity 属性"></a>opacity 属性</h3><pre><code>opacity:0.5;</code></pre><p>设置透明属性  0 会直接透明 1就显示最大（会触发事件）</p>
<p>在代码已有宽度限制不改变代码的情况下修改宽度</p>
<p>css 3种</p>
<p>  1.width：300px ! important  覆盖前面的宽度；</p>
<pre><code>          2. max-width: 300px  限制最大宽度

                3. transform :scale(倍数，1) 缩小原来的几/需要的多少 的倍数</code></pre><p>js方式</p>
<p>获取节点然后调用 setArribute(“style”,”width:300px!important;”);</p>
<p>7种方式解决移动端 Retina屏幕边框变粗的问题</p>
<p>比较完美解决方法 viewport +rem 实现</p>
<p>伪类 + transform 实现</p>
<p>background-image实现</p>
<p>call apply bind </p>
<p>都能改变this 指向问题</p>
<p>call apply 是立即调用函数</p>
<p>bind 绑定问this后，不会立即调用当前函数，而且是将函数返回，因此后面还需要再加（）才能调用</p>
<p>函数节流 指定时间间隔内置会执行一次 栗子滚动到底部的时候 我们可以设置300毫秒执行一次</p>
<p>函数防抖：(debounce) 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行</p>
<p>Doctype作用？标准模式与兼容模式各有什么区别?</p>
<blockquote>
<pre><code>（1）、&lt;!DOCTYPE&gt;声明位于位于HTML文档中的第一行，处于 &lt;html&gt; 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

（2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。</code></pre></blockquote>
<p>行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？</p>
<blockquote>
<pre><code>首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常见的空元素：
 &lt;br&gt; &lt;hr&gt; &lt;img&gt; &lt;input&gt; &lt;link&gt; &lt;meta&gt;
 鲜为人知的是：
 &lt;area&gt; &lt;base&gt; &lt;col&gt; &lt;command&gt; &lt;embed&gt; &lt;keygen&gt; &lt;param&gt; &lt;source&gt; &lt;track&gt; &lt;wbr&gt;</code></pre></blockquote>
<p>页面导入样式时，使用link和@import有什么区别？</p>
<pre><code>（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;</code></pre><p>常见的浏览器内核有哪些？</p>
<blockquote>
<pre><code>Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。      [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。   [ Chrome的：Blink（WebKit的分支）]</code></pre></blockquote>
<p>html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？</p>
<blockquote>
<pre><code>HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
   绘画 canvas;
   用于媒介回放的 video 和 audio 元素;
   本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
   sessionStorage 的数据在浏览器关闭后自动删除;
   语意化更好的内容元素，比如 article、footer、header、nav、section;
   表单控件，calendar、date、time、email、url、search;
   新的技术webworker, websocket, Geolocation;

移除的元素：
   纯表现的元素：basefont，big，center，font, s，strike，tt，u;
   对可用性产生负面影响的元素：frame，frameset，noframes；

* 支持HTML5新标签：
     IE8/IE7/IE6支持通过document.createElement方法产生的标签，
     可以利用这一特性让这些浏览器支持HTML5新标签，
     浏览器支持新标签后，还需要添加标签默认的样式。

     当然也可以直接使用成熟的框架、比如html5shim;
     &lt;!--[if lt IE 9]&gt;
        &lt;script&gt; src=&quot;//cdn.bootcss.com/html5shiv/r29/html5.min.js&quot;&lt;/script&gt;
     &lt;![endif]--&gt;

* 如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素</code></pre></blockquote>
<p>简述一下你对HTML语义化的理解？</p>
<blockquote>
<pre><code>用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。</code></pre></blockquote>
<p>HTML5的离线储存怎么使用，工作原理能不能解释一下？</p>
<pre><code>在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。</code></pre><p>Label的作用是什么？是怎么用的？</p>
<blockquote>
<pre><code>label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

&lt;label for=&quot;Name&quot;&gt;Number:&lt;/label&gt;
&lt;input type=“text“name=&quot;Name&quot; id=&quot;Name&quot;/&gt;

&lt;label&gt;Date:&lt;input type=&quot;text&quot; name=&quot;B&quot;/&gt;&lt;/label&gt;</code></pre></blockquote>
<p>flex 弹性布局的属性</p>
<p> justify-content： //子元素水平排列的方式            </p>
<p>​     center  //居中             </p>
<p>​    space-between  //两端对齐              </p>
<p>   space-around   // 子元素拉手分布             </p>
<p>​    flex-start     // 居左           </p>
<p>​      flex-end      //居右</p>
<p>  align-items  ：  // 子元素的垂直居中的排列方式        </p>
<p>​         enter    // 居中         </p>
<p>​       flex-end   //底部          </p>
<p>​       flex-start   //开始  align-content :  //多行的时候，子元素的垂直排列方式                  center    //居中              </p>
<p>​    flex-end   //底部           </p>
<p>​       flex-start   //开始           </p>
<p>​       flx-direction：  // 排列方式row 横向排列          </p>
<p>​        row-reverse    //横向反向排列</p>
<p>  flex-wrap ： //子元素是否在一行显示            </p>
<p>​     no-wrap   //不换行           </p>
<p>​      wrap    //换行</p>
<p>W3C标准盒子模型：height、width —– 仅指content(默认)，不包括padding和border</p>
<p><img src="https://cdn.jsdelivr.net/gh/lucy-zheng123/cdn@1.1/images/lading.gif" data-original="https://img-blog.csdn.net/20181014170252394?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dqaWFmZW5ndw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt="img"></p>
<p><img src="https://cdn.jsdelivr.net/gh/lucy-zheng123/cdn@1.1/images/lading.gif" data-original="https://img-blog.csdn.net/20181014170409675?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dqaWFmZW5ndw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt="img"></p>
<p>可以看到content高30px，但是总体加上padding+border就超出了30px，达到了50px</p>
<p>若我们想让content+padding+border加起来30px，只需要设置:box-sizing:border-box</p>
<p>IE盒模型：height、weight —-包含了 content+padding+border</p>
<h3 id="创建对象"><a href="#创建对象" class="headerlink" title="创建对象"></a>创建对象</h3><p>new 操作符新建一个对象 ，这个对象原型(<em>proto</em>)指向构造函数 constructor</p>
<h3 id="原型-原型链-几种继承方式"><a href="#原型-原型链-几种继承方式" class="headerlink" title="原型 原型链 几种继承方式"></a>原型 原型链 几种继承方式</h3><p>每个构造函数都有一个（<strong>proto</strong>）指向原型对象 我们常用的属性和方法都是在原型上定义的   原型对象也有个 constructor指向构造函数 这样相互指向所形成的链就是原型链 原型链最终指向的是object.prototype = null</p>
<p>属性指向</p>
<p>prototype    //对象和函数才有，被<strong>proto</strong>所指<br><strong>proto</strong>    //引用类型都有这个属性,指向构造函数的constructor<br>constructor    //存在于实例函数的prototype中，指向构造函数</p>
<pre><code>  function data(){
            console.log(&#39;123&#39;);
            return 1
        }
       let d1= new data()
        console.log(d1); // _proto_ =&gt; constructor 执行data函数
        user = {name:&#39;老郑打码&#39;};
        user.prototype = function name(){
            console.log(&#39;我是user的原型函数&#39;);
        }
        console.log(user);
        //原型上有了name 函数</code></pre><p>原型链继承</p>
<pre><code>Son.prototype = new Father()    //父类的私有和共有属性都继承到子类原型上
Son.prototype.constructor = Son</code></pre><p>借用构造函数继承</p>
<pre><code>function Son(){                    //相当于把父类的this换成子类的实例
    Father.call(this,&#39;要传的值&#39;)
}</code></pre><p>组合继承</p>
<pre><code>function Son(name)//把父类私有的和公有的都变成了子类共有的，但是调用了两次父类构造函数，生成了两份实例
     Father.call(this,name)
}
Son.prototype = new Father()</code></pre><p>原型继承</p>
<pre><code>function con(obj){          //一个容器,传入父构造实例对象,往F函数原型链添加实例对象,并返回
     function F(){}
     F.prototype = obj;
     return new F();
 }
 var s = new Father()
 var s1 = con(s);</code></pre><p>寄生继承</p>
<pre><code>function con(obj){          //一个容器,传入父构造实例对象,往F函数原型链添加实例对象,并返回
         function F(){}
         F.prototype = obj;
         return new F();
 }
function sub(obj){          //往上面的容器套一个壳,传入父构造实例对象,s1赋值为容器传入对象后
     var s1 = con(obj);
     s1.name = &#39;xx&#39;;
     return sub
 }
var s = new Father()
var s2 = sub(s);</code></pre><p>寄生组合</p>
<pre><code>function con(obj){          //一个容器,传入父构造实例对象,往F函数原型链添加实例对象,并返回
         function F(){}
         F.prototype = obj;
         return new F();
}
function sub(){
     Father.call(this)
 }
 var con = con(Father.prototype);
 sub.prototype = con ;
 con.constructor = sub;
 var s1 = new sub()</code></pre>
            </div>
            <hr/>

            

    <div class="reprint" id="reprint-statement">
        
            <div class="reprint__author">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-user">
                        文章作者:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="/zheng_jinhao/about" rel="external nofollow noreferrer">小蛮牙</a>
                </span>
            </div>
            <div class="reprint__type">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-link">
                        文章链接:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="https://zheng_jinhao.gitee.io/zheng_jinhao/2020/09/18/zong-he/">https://zheng_jinhao.gitee.io/zheng_jinhao/2020/09/18/zong-he/</a>
                </span>
            </div>
            <div class="reprint__notice">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-copyright">
                        版权声明:
                    </i>
                </span>
                <span class="reprint-info">
                    本博客所有文章除特別声明外，均采用
                    <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>
                    许可协议。转载请注明来源
                    <a href="/zheng_jinhao/about" target="_blank">小蛮牙</a>
                    !
                </span>
            </div>
        
    </div>

    <script async defer>
      document.addEventListener("copy", function (e) {
        let toastHTML = '<span>复制成功，请遵循本文的转载规则</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">查看</a>';
        M.toast({html: toastHTML})
      });

      function navToReprintStatement() {
        $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
      }
    </script>



            <div class="tag_share" style="display: block;">
                <div class="post-meta__tag-list" style="display: inline-block;">
                    
                        <div class="article-tag">
                            
                                <a href="/zheng_jinhao/tags/%E9%9D%A2%E8%AF%95/">
                                    <span class="chip bg-color">面试</span>
                                </a>
                            
                        </div>
                    
                </div>
                <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;">
                    <link rel="stylesheet" type="text/css" href="/zheng_jinhao/libs/share/css/share.min.css">
<div id="article-share">

    
    <div class="social-share" data-sites="twitter,facebook,google,qq,qzone,wechat,weibo,douban,linkedin" data-wechat-qrcode-helper="<p>微信扫一扫即可分享！</p>"></div>
    <script src="/zheng_jinhao/libs/share/js/social-share.min.js"></script>
    

    

</div>

                </div>
            </div>
            
                <style>
    #reward {
        margin: 40px 0;
        text-align: center;
    }

    #reward .reward-link {
        font-size: 1.4rem;
        line-height: 38px;
    }

    #reward .btn-floating:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    #rewardModal {
        width: 320px;
        height: 350px;
    }

    #rewardModal .reward-title {
        margin: 15px auto;
        padding-bottom: 5px;
    }

    #rewardModal .modal-content {
        padding: 10px;
    }

    #rewardModal .close {
        position: absolute;
        right: 15px;
        top: 15px;
        color: rgba(0, 0, 0, 0.5);
        font-size: 1.3rem;
        line-height: 20px;
        cursor: pointer;
    }

    #rewardModal .close:hover {
        color: #ef5350;
        transform: scale(1.3);
        -moz-transform:scale(1.3);
        -webkit-transform:scale(1.3);
        -o-transform:scale(1.3);
    }

    #rewardModal .reward-tabs {
        margin: 0 auto;
        width: 210px;
    }

    .reward-tabs .tabs {
        height: 38px;
        margin: 10px auto;
        padding-left: 0;
    }

    .reward-content ul {
        padding-left: 0 !important;
    }

    .reward-tabs .tabs .tab {
        height: 38px;
        line-height: 38px;
    }

    .reward-tabs .tab a {
        color: #fff;
        background-color: #ccc;
    }

    .reward-tabs .tab a:hover {
        background-color: #ccc;
        color: #fff;
    }

    .reward-tabs .wechat-tab .active {
        color: #fff !important;
        background-color: #22AB38 !important;
    }

    .reward-tabs .alipay-tab .active {
        color: #fff !important;
        background-color: #019FE8 !important;
    }

    .reward-tabs .reward-img {
        width: 210px;
        height: 210px;
    }
</style>

<div id="reward">
    <a href="#rewardModal" class="reward-link modal-trigger btn-floating btn-medium waves-effect waves-light red">赏</a>

    <!-- Modal Structure -->
    <div id="rewardModal" class="modal">
        <div class="modal-content">
            <a class="close modal-close"><i class="fas fa-times"></i></a>
            <h4 class="reward-title">你的支持是我前进的动力</h4>
            <div class="reward-content">
                <div class="reward-tabs">
                    <ul class="tabs row">
                        <li class="tab col s6 alipay-tab waves-effect waves-light"><a href="#alipay">支付宝</a></li>
                        <li class="tab col s6 wechat-tab waves-effect waves-light"><a href="#wechat">微 信</a></li>
                    </ul>
                    <div id="alipay">
                        <img src="https://cdn.jsdelivr.net/gh/lucy-zheng123/cdn@1.1/images/lading.gif" data-original="https://cdn.jsdelivr.net/gh/lucy-zheng123/cdn@1.1//medias/reward/alipay.jpg" class="reward-img" alt="支付宝打赏二维码">
                    </div>
                    <div id="wechat">
                        <img src="https://cdn.jsdelivr.net/gh/lucy-zheng123/cdn@1.1/images/lading.gif" data-original="https://cdn.jsdelivr.net/gh/lucy-zheng123/cdn@1.1//medias/reward/wechat.png" class="reward-img" alt="微信打赏二维码">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('.tabs').tabs();
    });
</script>

            
        </div>
    </div>

    

    

    

    

    
        <style>
    .valine-card {
        margin: 1.5rem auto;
    }

    .valine-card .card-content {
        padding: 20px 20px 5px 20px;
    }

    #vcomments textarea {
        box-sizing: border-box;
        background: url("/zheng_jinhao/medias/comment_bg.png") 100% 100% no-repeat;
    }

    #vcomments p {
        margin: 2px 2px 10px;
        font-size: 1.05rem;
        line-height: 1.78rem;
    }

    #vcomments blockquote p {
        text-indent: 0.2rem;
    }

    #vcomments a {
        padding: 0 2px;
        color: #4cbf30;
        font-weight: 500;
        text-decoration: none;
    }

    #vcomments img {
        max-width: 100%;
        height: auto;
        cursor: pointer;
    }

    #vcomments ol li {
        list-style-type: decimal;
    }

    #vcomments ol,
    ul {
        display: block;
        padding-left: 2em;
        word-spacing: 0.05rem;
    }

    #vcomments ul li,
    ol li {
        display: list-item;
        line-height: 1.8rem;
        font-size: 1rem;
    }

    #vcomments ul li {
        list-style-type: disc;
    }

    #vcomments ul ul li {
        list-style-type: circle;
    }

    #vcomments table, th, td {
        padding: 12px 13px;
        border: 1px solid #dfe2e5;
    }

    #vcomments table, th, td {
        border: 0;
    }

    table tr:nth-child(2n), thead {
        background-color: #fafafa;
    }

    #vcomments table th {
        background-color: #f2f2f2;
        min-width: 80px;
    }

    #vcomments table td {
        min-width: 80px;
    }

    #vcomments h1 {
        font-size: 1.85rem;
        font-weight: bold;
        line-height: 2.2rem;
    }

    #vcomments h2 {
        font-size: 1.65rem;
        font-weight: bold;
        line-height: 1.9rem;
    }

    #vcomments h3 {
        font-size: 1.45rem;
        font-weight: bold;
        line-height: 1.7rem;
    }

    #vcomments h4 {
        font-size: 1.25rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    #vcomments h5 {
        font-size: 1.1rem;
        font-weight: bold;
        line-height: 1.4rem;
    }

    #vcomments h6 {
        font-size: 1rem;
        line-height: 1.3rem;
    }

    #vcomments p {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    #vcomments hr {
        margin: 12px 0;
        border: 0;
        border-top: 1px solid #ccc;
    }

    #vcomments blockquote {
        margin: 15px 0;
        border-left: 5px solid #42b983;
        padding: 1rem 0.8rem 0.3rem 0.8rem;
        color: #666;
        background-color: rgba(66, 185, 131, .1);
    }

    #vcomments pre {
        font-family: monospace, monospace;
        padding: 1.2em;
        margin: .5em 0;
        background: #272822;
        overflow: auto;
        border-radius: 0.3em;
        tab-size: 4;
    }

    #vcomments code {
        font-family: monospace, monospace;
        padding: 1px 3px;
        font-size: 0.92rem;
        color: #e96900;
        background-color: #f8f8f8;
        border-radius: 2px;
    }

    #vcomments pre code {
        font-family: monospace, monospace;
        padding: 0;
        color: #e8eaf6;
        background-color: #272822;
    }

    #vcomments pre[class*="language-"] {
        padding: 1.2em;
        margin: .5em 0;
    }

    #vcomments code[class*="language-"],
    pre[class*="language-"] {
        color: #e8eaf6;
    }

    #vcomments [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
        position: inherit;
        margin-left: -1.3rem;
        margin-right: 0.4rem;
        margin-top: -1px;
        vertical-align: middle;
        left: unset;
        visibility: visible;
    }

    #vcomments b,
    strong {
        font-weight: bold;
    }

    #vcomments dfn {
        font-style: italic;
    }

    #vcomments small {
        font-size: 85%;
    }

    #vcomments cite {
        font-style: normal;
    }

    #vcomments mark {
        background-color: #fcf8e3;
        padding: .2em;
    }

    #vcomments table, th, td {
        padding: 12px 13px;
        border: 1px solid #dfe2e5;
    }

    table tr:nth-child(2n), thead {
        background-color: #fafafa;
    }

    #vcomments table th {
        background-color: #f2f2f2;
        min-width: 80px;
    }

    #vcomments table td {
        min-width: 80px;
    }

    #vcomments [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
        position: inherit;
        margin-left: -1.3rem;
        margin-right: 0.4rem;
        margin-top: -1px;
        vertical-align: middle;
        left: unset;
        visibility: visible;
    }
</style>

<div class="card valine-card" data-aos="fade-up">
    <div class="comment_headling" style="font-size: 20px; font-weight: 700; position: relative; padding-left: 20px; top: 15px; padding-bottom: 5px;">
        <i class="fas fa-comments fa-fw" aria-hidden="true"></i>
        <span>评论</span>
    </div>
    <div id="vcomments" class="card-content" style="display: grid">
    </div>
</div>

<script src="/zheng_jinhao/libs/valine/av-min.js"></script>
<script src="/zheng_jinhao/libs/valine/Valine.min.js"></script>
<script>
    new Valine({
        el: '#vcomments',
        appId: 'fIVm2ru0g1QdmBiHbb0VyPag-gzGzoHsz',
        appKey: 'gp3czLg0Lm6yE1fzOACGaLsH',
        notify: 'false' === 'true',
        verify: 'false' === 'true',
        visitor: 'true' === 'true',
        avatar: 'mm',
        pageSize: '10',
        lang: 'zh-cn',
        placeholder: 'just go go'
    });
</script>

    

    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="fas fa-chevron-left"></i>&nbsp;上一篇</div>
            <div class="card">
                <a href="/zheng_jinhao/2020/12/20/excel-kuai-jie-fang-shi/">
                    <div class="card-image">
                        
                        
                        <img src="https://cdn.jsdelivr.net/gh/lucy-zheng123/cdn@1.1/images/lading.gif" data-original="https://cdn.jsdelivr.net/gh/lucy-zheng123/cdn//medias/featureimages/6.png" class="responsive-img" alt="excel快捷方式">
                        
                        <span class="card-title">excel快捷方式</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            常见快捷方式快捷方式（基础）
一键求和 ：选择单元格 Alt + = 

一键插入条形图： 选择单元格 alt+f1

单元格换行： 选中单元格 alt+enter（回车）

快速移动数据： 选中单元格 alt+左键

快速生成下拉菜单  
                        
                    </div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <i class="far fa-clock fa-fw icon-date"></i>2020-12-20
                        </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/zheng_jinhao/categories/wps%E5%8A%9E%E5%85%AC/" class="post-category">
                                    wps办公
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/zheng_jinhao/tags/excel/">
                        <span class="chip bg-color">excel</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                下一篇&nbsp;<i class="fas fa-chevron-right"></i>
            </div>
            <div class="card">
                <a href="/zheng_jinhao/2020/08/27/jian-dan-da-jian-fu-wu-duan/">
                    <div class="card-image">
                        
                        
                        <img src="https://cdn.jsdelivr.net/gh/lucy-zheng123/cdn@1.1/images/lading.gif" data-original="https://cdn.jsdelivr.net/gh/lucy-zheng123/cdn//medias/featureimages/5.jpg" class="responsive-img" alt="简单搭建服务端">
                        
                        <span class="card-title">简单搭建服务端</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            搭建本地数据利用 mysql express node.js 快速搭建本地服务器数据
首先做出初始化项目操作cnpm init （这个会默认生成一个package文件）
然后安装需要 express mysql数据库 直接 cnpm i  
                        
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2020-08-27
                            </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/zheng_jinhao/categories/%E6%9C%8D%E5%8A%A1%E7%AB%AF/" class="post-category">
                                    服务端
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/zheng_jinhao/tags/%E6%9C%8D%E5%8A%A1%E5%99%A8/">
                        <span class="chip bg-color">服务器</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
    </div>
</article>

</div>



<!-- 代码块功能依赖 -->
<script type="text/javascript" src="/zheng_jinhao/libs/codeBlock/codeBlockFuction.js"></script>

<!-- 代码语言 -->

<script type="text/javascript" src="/zheng_jinhao/libs/codeBlock/codeLang.js"></script>


<!-- 代码块复制 -->

<script type="text/javascript" src="/zheng_jinhao/libs/codeBlock/codeCopy.js"></script>


<!-- 代码块收缩 -->

<script type="text/javascript" src="/zheng_jinhao/libs/codeBlock/codeShrink.js"></script>


<!-- 代码块折行 -->

<style type="text/css">
code[class*="language-"], pre[class*="language-"] { white-space: pre !important; }
</style>


    </div>
    <div id="toc-aside" class="expanded col l3 hide-on-med-and-down">
        <div class="toc-widget">
            <div class="toc-title"><i class="far fa-list-alt"></i>&nbsp;&nbsp;目录</div>
            <div id="toc-content"></div>
        </div>
    </div>
</div>

<!-- TOC 悬浮按钮. -->

<div id="floating-toc-btn" class="hide-on-med-and-down">
    <a class="btn-floating btn-large bg-color">
        <i class="fas fa-list-ul"></i>
    </a>
</div>


<script src="/zheng_jinhao/libs/tocbot/tocbot.min.js"></script>
<script>
    $(function () {
        tocbot.init({
            tocSelector: '#toc-content',
            contentSelector: '#articleContent',
            headingsOffset: -($(window).height() * 0.4 - 45),
            collapseDepth: Number('0'),
            headingSelector: 'h2, h3, h4'
        });

        // modify the toc link href to support Chinese.
        let i = 0;
        let tocHeading = 'toc-heading-';
        $('#toc-content a').each(function () {
            $(this).attr('href', '#' + tocHeading + (++i));
        });

        // modify the heading title id to support Chinese.
        i = 0;
        $('#articleContent').children('h2, h3, h4').each(function () {
            $(this).attr('id', tocHeading + (++i));
        });

        // Set scroll toc fixed.
        let tocHeight = parseInt($(window).height() * 0.4 - 64);
        let $tocWidget = $('.toc-widget');
        $(window).scroll(function () {
            let scroll = $(window).scrollTop();
            /* add post toc fixed. */
            if (scroll > tocHeight) {
                $tocWidget.addClass('toc-fixed');
            } else {
                $tocWidget.removeClass('toc-fixed');
            }
        });

        
        /* 修复文章卡片 div 的宽度. */
        let fixPostCardWidth = function (srcId, targetId) {
            let srcDiv = $('#' + srcId);
            if (srcDiv.length === 0) {
                return;
            }

            let w = srcDiv.width();
            if (w >= 450) {
                w = w + 21;
            } else if (w >= 350 && w < 450) {
                w = w + 18;
            } else if (w >= 300 && w < 350) {
                w = w + 16;
            } else {
                w = w + 14;
            }
            $('#' + targetId).width(w);
        };

        // 切换TOC目录展开收缩的相关操作.
        const expandedClass = 'expanded';
        let $tocAside = $('#toc-aside');
        let $mainContent = $('#main-content');
        $('#floating-toc-btn .btn-floating').click(function () {
            if ($tocAside.hasClass(expandedClass)) {
                $tocAside.removeClass(expandedClass).hide();
                $mainContent.removeClass('l9');
            } else {
                $tocAside.addClass(expandedClass).show();
                $mainContent.addClass('l9');
            }
            fixPostCardWidth('artDetail', 'prenext-posts');
        });
        
    });
</script>

    

</main>




    <footer class="page-footer bg-color">
    
        <link rel="stylesheet" href="/zheng_jinhao/libs/aplayer/APlayer.min.css">
<style>
    .aplayer .aplayer-lrc p {
        
        font-size: 12px;
        font-weight: 700;
        line-height: 16px !important;
    }

    .aplayer .aplayer-lrc p.aplayer-lrc-current {
        
        font-size: 15px;
        color: #42b983;
    }

    
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
        left: -66px !important;
    }

    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
        left: 0px !important;
    }

    
</style>
<div class="">
    
    <div class="row">
        <meting-js class="col l8 offset-l2 m10 offset-m1 s12"
                   server="netease"
                   type="playlist"
                   id="2195404116"
                   fixed='true'
                   autoplay='false'
                   theme='#42b983'
                   loop='all'
                   order='random'
                   preload='auto'
                   volume='0.7'
                   list-folded='false'
        >
        </meting-js>
    </div>
</div>

<script src="/zheng_jinhao/libs/aplayer/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

    
    <div class="container row center-align" style="margin-bottom: 0px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            <span id="year">2019</span>
            <a href="/zheng_jinhao/about" target="_blank">小蛮牙</a>
            |&nbsp;Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;Theme&nbsp;<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>
            
            &nbsp;<i class="fas fa-chart-area"></i>&nbsp;站点总字数:&nbsp;<span
                class="white-color">56.7k</span>&nbsp;字
            
            
            
            
            
            
            <span id="busuanzi_container_site_pv">
                |&nbsp;<i class="far fa-eye"></i>&nbsp;总访问量:&nbsp;<span id="busuanzi_value_site_pv"
                    class="white-color"></span>&nbsp;次
            </span>
            
            
            <span id="busuanzi_container_site_uv">
                |&nbsp;<i class="fas fa-users"></i>&nbsp;总访问人数:&nbsp;<span id="busuanzi_value_site_uv"
                    class="white-color"></span>&nbsp;人
            </span>
            
            <br>
            
            <br>
            
        </div>
        <div class="col s12 m4 l4 social-link social-statis">
    <a href="https://github.com/lucy-zheng123" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="mailto:766557057@qq.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>







    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=766557057" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 766557057" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>







    <a href="/zheng_jinhao/atom.xml" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top" data-delay="50">
        <i class="fas fa-rss"></i>
    </a>

</div>
    </div>



    
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script src="/zheng_jinhao/js/search.js"></script>
<script type="text/javascript">
$(function () {
    searchFunc("/zheng_jinhao/search.xml", 'searchInput', 'searchResult');
});
</script>

    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>


    <script src="/zheng_jinhao/libs/materialize/materialize.min.js"></script>
    <script src="/zheng_jinhao/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/zheng_jinhao/libs/aos/aos.js"></script>
    <script src="/zheng_jinhao/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/zheng_jinhao/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/zheng_jinhao/js/matery.js"></script>

    <!--单击显示文字-->

<!--浏览器搞笑标题-->
<!-- <script type="text/javascript" src="\js\FunnyTitle.js"></script> -->








<!--动态线条背景-->
<script type="text/javascript"
color="220,220,220" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>
<!-- 雪花特效 -->
<!-- <script type="text/javascript" src="\js\snow.js"></script> -->
<!-- <script src="https://cj.weather.com.cn"></script> -->

    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    <script src="/zheng_jinhao/libs/others/clicklove.js" async="async"></script>
    
    
    <script async src="/zheng_jinhao/libs/others/busuanzi.pure.mini.js"></script>
    

    

    

    

    

    

    
    <script src="/zheng_jinhao/libs/instantpage/instantpage.js" type="module"></script>
    

<script src="/zheng_jinhao/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"scale":1,"hHeadPos":0.5,"vHeadPos":0.618,"jsonPath":"/zheng_jinhao/live2dw/assets/z16.model.json"},"display":{"superSample":2,"width":150,"height":300,"position":"left","hOffset":0,"vOffset":-20},"mobile":{"show":false,"scale":0.5},"log":false});</script><script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(n){n.imageLazyLoadSetting.processImages=o;var i=n.imageLazyLoadSetting.isSPA,r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]"));function o(){i&&(r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")));for(var t,e,a=0;a<r.length;a++)t=r[a],e=void 0,0<=(e=t.getBoundingClientRect()).bottom&&0<=e.left&&e.top<=(n.innerHeight+240||document.documentElement.clientHeight+240)&&function(){var t,e,n,i,o=r[a];t=o,e=function(){r=r.filter(function(t){return o!==t})},n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,e&&e()},n.src=i}()}o(),n.addEventListener("scroll",function(){var t,e;t=o,e=n,clearTimeout(t.tId),t.tId=setTimeout(function(){t.call(e)},500)})}(this);</script></body>

</html>
